<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand"></span>
        </el-col>
        <el-col :span="20">
          <span class="hand textactive">待办任务</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-row style="margin-bottom: 10px;" class="btn" type="flex" justify="center">
            <el-col>
              <div style="float: left;">
                <el-radio-group v-model="radio" style="margin-top: 20px;" @change="radiochange">
                  <el-radio :label="1">未回复面试时间简历 ({{unanswerednum}})</el-radio>
                  <el-radio :label="2">退回未处理简历 ({{unprocessednum}})</el-radio>
                </el-radio-group>
              </div>
              <div style="float: right;">
                <el-input
                  style="margin-top: 11px;"
                  size="small"
                  placeholder="请输入内容"
                  @keyup.enter.native="search"
                  v-model.trim="searchword"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    style="cursor: pointer;"
                    @click="search"
                  ></i>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23" class="left" style="color: #1198fe;">
          <el-col class="posttable2">
            <el-table ref="singleTable" highlight-current-row :data="tableData">
              <el-table-column prop="推送客户" label="推送客户"></el-table-column>
              <el-table-column prop="推送职位" label="推送职位"></el-table-column>
              <el-table-column prop="职位级别" label="职位级别"></el-table-column>
              <el-table-column label="推送时间">
                <template slot-scope="scope">
                  <span>{{scope.row.推送时间 | converTime("YYYY-MM-DD HH:mm")}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="所属区域" label="所属区域"></el-table-column>
              <el-table-column prop="姓名" label="姓名"></el-table-column>
              <el-table-column prop="毕业时间" label="毕业时间"></el-table-column>
              <el-table-column prop="出生年月" label="出生年月"></el-table-column>
              <el-table-column prop="联系方式" label="联系方式"></el-table-column>
              <el-table-column prop="离职状态" label="离职状态"></el-table-column>
              <el-table-column prop="期望薪资" label="期望薪资"></el-table-column>
              <el-table-column prop="到岗时间" label="到岗时间"></el-table-column>
              <el-table-column v-if="flag" prop="未处理时间" label="未处理时间"></el-table-column>
            </el-table>

            <div class="pager">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="pagehandleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pagesize"
                :page-sizes="[5,10,15]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount"
              ></el-pagination>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "tasktodocommissioner",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      totalcount: null,
      searchword: "",
      radio: 1,
      unanswerednum: "",
      unprocessednum: "",
      flag: false
    };
  },
  created() {
    axios.post(this.url + "/todaytask/queryhrtodaytask").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.unanswerednum = res.data.data.nothandlenum;
        this.unprocessednum = res.data.data.rejectnum;
      }
    });

    this.getTableData();
  },
  methods: {
    //搜索功能
    search() {
      this.currentPage = 1;
      if (this.radio == 1) {
        this.flag = false;
        this.getTableData();
      } else if (this.radio == 2) {
        this.flag = true;
        this.searcherjectrsume();
      }
    },
    //获取未反馈消息和待办任务的表格数据
    getTableData() {
      axios
        .post(
          this.url + "/todaytask/searchfuzzynothandleinfo",
          qs.stringify({
            condition: this.searchword,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
    },
    searcherjectrsume() {
      axios
        .post(
          this.url + "/todaytask/searchrejectrsume",
          qs.stringify({
            condition: this.searchword,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      if (this.radio == 1) {
        this.getTableData();
      } else if (this.radio == 2) {
        this.searcherjectrsume();
      }
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      if (this.radio == 1) {
        this.getTableData();
      } else if (this.radio == 2) {
        this.searcherjectrsume();
      }
    },
    //切换单选按钮
    radiochange(val) {
      this.currentPage = 1;
      this.searchword = "";
      if (val == 1) {
        this.flag = false;
        this.getTableData();
      } else if (val == 2) {
        this.flag = true;
        this.searcherjectrsume();
      }
    }
  },
  watch: {
    searchword: function(val) {
      if (val == "") {
        this.currentPage = 1;
        if (this.radio == 1) {
          this.flag = false;
          this.getTableData();
        } else if (this.radio == 2) {
          this.flag = true;
          this.searcherjectrsume();
        }
      }
    }
  }
};
</script>

<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}

.textactive {
  color: #1099ff;
}

.active {
  color: #1397fe;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>

